import React from "react";
import { Layout } from "antd";
import { Outlet } from "react-router-dom";
import { connect } from "react-redux";
import { setAuthButtons } from "@/redux/modules/auth/action";
import { updateCollapse } from "@/redux/modules/menu/action";
import LayoutMenu from "./components/Menu/index";
import LayoutHeader from "./components/Header/index";
import "./index.less";
const LayoutIndex = (props: any) => {
	const { Footer, Sider, Content } = Layout;
	console.log(props);
	const { isCollapse } = props;
	return (
		<Layout className="container">
			<Sider trigger={null} collapsible collapsed={isCollapse} className="ant-layout-sider">
				<div className="demo-logo-vertical" />
				<LayoutMenu />
			</Sider>
			<Layout className="ant-layout">
				<LayoutHeader />
				<Content>
					<Outlet />
				</Content>
				<Footer style={{ textAlign: "center" }}>Ant Design ©{new Date().getFullYear()} Created by Ant UED</Footer>
			</Layout>
		</Layout>
	);
};
const mapStateToProps = (state: any) => state.menu;
const mapDispatchToProps = { setAuthButtons, updateCollapse };
export default connect(mapStateToProps, mapDispatchToProps)(LayoutIndex);
